<template>
  <div class="echart">
    <div class="enlarge" @click="openDialog">
      <i class="el-icon-full-screen" />
    </div>
    <div class="left_item" style="width: 20%; height: 100%; text-align: center">
      <div v-for="(item, index) in indexList" :key="index + 'o'" class="_item">
        <!-- <el-tooltip class="item" effect="dark" :content="'电耗：'+item.impEp+'kW‧h'" placement="top"> -->
        <div @click="getLineData(item.devSn, 'click')">
          <svg
            width="50px"
            height="40px"
            viewBox="0 0 50 40"
            version="1.1"
            style="margin-right: 10px"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <g id="大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g id="首页" transform="translate(-1476.000000, -860.000000)">
                <g id="1" transform="translate(1476.000000, 860.000000)">
                  <g id="编组" fill-rule="nonzero">
                    <polygon
                      id="路径"
                      fill="#5AA7F8"
                      points="0.0147964015 1.2014678 45.4693419 1.2014678 45.4693419 39.0802557 0.0147964015 39.0802557"
                    ></polygon>
                    <polygon
                      id="路径"
                      fill="#9DCDFB"
                      points="1.52994792 3.0954072 17.4390388 3.0954072 17.4390388 37.1863163 1.52994792 37.1863163"
                    ></polygon>
                    <polygon
                      id="路径"
                      fill="#5AA7F8"
                      points="4.93903883 9.53480114 14.0299479 9.53934659 14.0299479 20.1408617 4.93903883 20.1363163"
                    ></polygon>
                    <polygon
                      id="路径"
                      fill="#3579CF"
                      points="6.45419034 11.1094223 12.5674479 11.0499527 12.5674479 15.6348011 6.45419034 15.6942708"
                    ></polygon>
                    <polygon
                      id="路径"
                      fill="#A9D3FB"
                      points="7.2117661 11.8738163 11.7966146 11.8075284 11.7966146 14.8643466 7.2117661 14.9298769"
                    ></polygon>
                    <polygon
                      id="路径"
                      fill="#9DCDFB"
                      points="18.9541903 3.0954072 43.9541903 3.0954072 43.9541903 22.0954072 18.9541903 22.0954072"
                    ></polygon>
                    <polygon
                      id="路径"
                      fill="#4990D4"
                      points="41.3026752 10.6711648 42.4390388 10.6711648 42.4390388 13.6181345 41.3026752 13.6181345"
                    ></polygon>
                    <polygon
                      id="路径"
                      fill="#9DCDFB"
                      points="18.9541903 21.6560133 43.9541903 21.6560133 43.9541903 37.1863163 18.9541903 37.1863163"
                    ></polygon>
                    <path
                      d="M41.3026752,28.0954072 L42.4390388,28.0954072 L42.4390388,31.0423769 L41.3026752,31.0423769 L41.3026752,28.0954072 Z M49.6360085,0.0651041667 L45.4693419,1.21283144 L45.4693419,39.0802557 L49.6360085,37.9215436 L49.6360085,0.0651041667 Z"
                      id="形状"
                      fill="#4990D4"
                    ></path>
                    <polygon
                      id="路径"
                      fill="#70B5F9"
                      points="0.0147964015 1.2014678 6.07540246 0.0651041667 49.6360085 0.0651041667 45.4693419 1.2014678"
                    ></polygon>
                    <path
                      d="M48.8265388,10.4893466 C48.9203217,10.4634639 49.0184607,10.5128465 49.0535622,10.6035825 C49.0886638,10.6943185 49.0493091,10.7968909 48.9625237,10.8408617 L48.9303267,10.8533617 L46.2788116,11.6109375 C46.1841148,11.6391401 46.0836487,11.589805 46.0480661,11.4976273 C46.0124835,11.4054496 46.0537421,11.3014057 46.1428267,11.2586648 L46.1750237,11.2465436 L48.8265388,10.4889678 L48.8265388,10.4893466 Z M48.8265388,11.2469223 C48.9203217,11.2210397 49.0184607,11.2704222 49.0535622,11.3611582 C49.0886638,11.4518943 49.0493091,11.5544667 48.9625237,11.5984375 L48.9303267,11.6109375 L46.2788116,12.3685133 C46.1841148,12.3967158 46.0836487,12.3473808 46.0480661,12.2552031 C46.0124835,12.1630253 46.0537421,12.0589815 46.1428267,12.0162405 L46.1750237,12.0041193 L48.8265388,11.2465436 L48.8265388,11.2469223 Z M48.8265388,12.0044981 C48.9203217,11.9786154 49.0184607,12.027998 49.0535622,12.118734 C49.0886638,12.20947 49.0493091,12.3120425 48.9625237,12.3560133 L48.9303267,12.3685133 L46.2788116,13.126089 C46.1841148,13.1542916 46.0836487,13.1049565 46.0480661,13.0127788 C46.0124835,12.9206011 46.0537421,12.8165573 46.1428267,12.7738163 L46.1750237,12.7616951 L48.8265388,12.0041193 L48.8265388,12.0044981 Z M48.8265388,12.7620739 C48.9203217,12.7361912 49.0184607,12.7855737 49.0535622,12.8763098 C49.0886638,12.9670458 49.0493091,13.0696182 48.9625237,13.113589 L48.9303267,13.126089 L46.2788116,13.8836648 C46.1841148,13.9118673 46.0836487,13.8625323 46.0480661,13.7703546 C46.0124835,13.6781768 46.0537421,13.574133 46.1428267,13.531392 L46.1750237,13.5192708 L48.8265388,12.7616951 L48.8265388,12.7620739 Z M48.8265388,13.5196496 C48.9203217,13.4937669 49.0184607,13.5431495 49.0535622,13.6338855 C49.0886638,13.7246215 49.0493091,13.827194 48.9625237,13.8711648 L48.9303267,13.8836648 L46.2788116,14.6412405 C46.1841148,14.6694431 46.0836487,14.6201081 46.0480661,14.5279303 C46.0124835,14.4357526 46.0537421,14.3317088 46.1428267,14.2889678 L46.1750237,14.2768466 L48.8265388,13.5192708 L48.8265388,13.5196496 Z M48.8265388,14.2772254 C48.9203217,14.2513427 49.0184607,14.3007252 49.0535622,14.3914613 C49.0886638,14.4821973 49.0493091,14.5847697 48.9625237,14.6287405 L48.9303267,14.6412405 L46.2788116,15.3988163 C46.1841148,15.4270189 46.0836487,15.3776838 46.0480661,15.2855061 C46.0124835,15.1933284 46.0537421,15.0892845 46.1428267,15.0465436 L46.1750237,15.0344223 L48.8265388,14.2768466 L48.8265388,14.2772254 Z M48.8265388,15.0348011 C48.9203217,15.0089185 49.0184607,15.058301 49.0535622,15.149037 C49.0886638,15.239773 49.0493091,15.3423455 48.9625237,15.3863163 L48.9303267,15.3988163 L46.2788116,16.156392 C46.1841148,16.1845946 46.0836487,16.1352596 46.0480661,16.0430818 C46.0124835,15.9509041 46.0537421,15.8468603 46.1428267,15.8041193 L46.1750237,15.7919981 L48.8265388,15.0344223 L48.8265388,15.0348011 Z M48.8265388,15.7923769 C48.9203217,15.7664942 49.0184607,15.8158768 49.0535622,15.9066128 C49.0886638,15.9973488 49.0493091,16.0999212 48.9625237,16.143892 L48.9303267,16.156392 L46.2788116,16.9139678 C46.1841148,16.9421704 46.0836487,16.8928353 46.0480661,16.8006576 C46.0124835,16.7084799 46.0537421,16.604436 46.1428267,16.5616951 L46.1750237,16.5495739 L48.8265388,15.7919981 L48.8265388,15.7923769 Z M48.8265388,16.5499527 C48.9203217,16.52407 49.0184607,16.5734525 49.0535622,16.6641885 C49.0886638,16.7549246 49.0493091,16.857497 48.9625237,16.9014678 L48.9303267,16.9139678 L46.2788116,17.6715436 C46.1841148,17.6997461 46.0836487,17.6504111 46.0480661,17.5582334 C46.0124835,17.4660556 46.0537421,17.3620118 46.1428267,17.3192708 L46.1750237,17.3071496 L48.8265388,16.5495739 L48.8265388,16.5499527 Z M48.8265388,17.3075284 C48.9203217,17.2816457 49.0184607,17.3310283 49.0535622,17.4217643 C49.0886638,17.5125003 49.0493091,17.6150728 48.9625237,17.6590436 L48.9303267,17.6715436 L46.2788116,18.4291193 C46.1841148,18.4573219 46.0836487,18.4079868 46.0480661,18.3158091 C46.0124835,18.2236314 46.0537421,18.1195876 46.1428267,18.0768466 L46.1750237,18.0647254 L48.8265388,17.3071496 L48.8265388,17.3075284 Z M48.8265388,18.0651042 C48.9203217,18.0392215 49.0184607,18.088604 49.0535622,18.1793401 C49.0886638,18.2700761 49.0493091,18.3726485 48.9625237,18.4166193 L48.9303267,18.4291193 L46.2788116,19.1866951 C46.1841148,19.2148977 46.0836487,19.1655626 46.0480661,19.0733849 C46.0124835,18.9812071 46.0537421,18.8771633 46.1428267,18.8344223 L46.1750237,18.8223011 L48.8265388,18.0647254 L48.8265388,18.0651042 Z M48.8265388,18.8226799 C48.9203217,18.7967972 49.0184607,18.8461798 49.0535622,18.9369158 C49.0886638,19.0276518 49.0493091,19.1302243 48.9625237,19.1741951 L48.9303267,19.1866951 L46.2788116,19.9442708 C46.1841148,19.9724734 46.0836487,19.9231384 46.0480661,19.8309606 C46.0124835,19.7387829 46.0537421,19.6347391 46.1428267,19.5919981 L46.1750237,19.5798769 L48.8265388,18.8223011 L48.8265388,18.8226799 Z M48.8265388,19.5802557 C48.9203217,19.554373 49.0184607,19.6037556 49.0535622,19.6944916 C49.0886638,19.7852276 49.0493091,19.8878 48.9625237,19.9317708 L48.9303267,19.9442708 L46.2788116,20.7018466 C46.1841148,20.7300492 46.0836487,20.6807141 46.0480661,20.5885364 C46.0124835,20.4963587 46.0537421,20.3923148 46.1428267,20.3495739 L46.1750237,20.3374527 L48.8265388,19.5798769 L48.8265388,19.5802557 Z M48.8265388,20.3378314 C48.9203217,20.3119488 49.0184607,20.3613313 49.0535622,20.4520673 C49.0886638,20.5428033 49.0493091,20.6453758 48.9625237,20.6893466 L48.9303267,20.7018466 L46.2788116,21.4594223 C46.1841148,21.4876249 46.0836487,21.4382899 46.0480661,21.3461121 C46.0124835,21.2539344 46.0537421,21.1498906 46.1428267,21.1071496 L46.1750237,21.0950284 L48.8265388,20.3374527 L48.8265388,20.3378314 Z M48.8265388,21.0954072 C48.9203217,21.0695245 49.0184607,21.1189071 49.0535622,21.2096431 C49.0886638,21.3003791 49.0493091,21.4029515 48.9625237,21.4469223 L48.9303267,21.4594223 L46.2788116,22.2169981 C46.1841148,22.2452007 46.0836487,22.1958656 46.0480661,22.1036879 C46.0124835,22.0115102 46.0537421,21.9074663 46.1428267,21.8647254 L46.1750237,21.8526042 L48.8265388,21.0950284 L48.8265388,21.0954072 Z M48.8265388,21.852983 C48.9203217,21.8271003 49.0184607,21.8764828 49.0535622,21.9672188 C49.0886638,22.0579549 49.0493091,22.1605273 48.9625237,22.2044981 L48.9303267,22.2169981 L46.2788116,22.9745739 C46.1841148,23.0027764 46.0836487,22.9534414 46.0480661,22.8612637 C46.0124835,22.7690859 46.0537421,22.6650421 46.1428267,22.6223011 L46.1750237,22.6101799 L48.8265388,21.8526042 L48.8265388,21.852983 Z M48.8265388,22.6105587 C48.9203217,22.584676 49.0184607,22.6340586 49.0535622,22.7247946 C49.0886638,22.8155306 49.0493091,22.9181031 48.9625237,22.9620739 L48.9303267,22.9745739 L46.2788116,23.7321496 C46.1841148,23.7603522 46.0836487,23.7110171 46.0480661,23.6188394 C46.0124835,23.5266617 46.0537421,23.4226179 46.1428267,23.3798769 L46.1750237,23.3677557 L48.8265388,22.6101799 L48.8265388,22.6105587 Z M48.8265388,23.3681345 C48.9203217,23.3422518 49.0184607,23.3916343 49.0535622,23.4823704 C49.0886638,23.5731064 49.0493091,23.6756788 48.9625237,23.7196496 L48.9303267,23.7321496 L46.2788116,24.4897254 C46.1841148,24.517928 46.0836487,24.4685929 46.0480661,24.3764152 C46.0124835,24.2842374 46.0537421,24.1801936 46.1428267,24.1374527 L46.1750237,24.1253314 L48.8265388,23.3677557 L48.8265388,23.3681345 Z M48.8265388,24.1257102 C48.9203217,24.0998276 49.0184607,24.1492101 49.0535622,24.2399461 C49.0886638,24.3306821 49.0493091,24.4332546 48.9625237,24.4772254 L48.9303267,24.4897254 L46.2788116,25.2473011 C46.1841148,25.2755037 46.0836487,25.2261687 46.0480661,25.1339909 C46.0124835,25.0418132 46.0537421,24.9377694 46.1428267,24.8950284 L46.1750237,24.8829072 L48.8265388,24.1253314 L48.8265388,24.1257102 Z M48.8265388,24.883286 C48.9203217,24.8574033 49.0184607,24.9067859 49.0535622,24.9975219 C49.0886638,25.0882579 49.0493091,25.1908303 48.9625237,25.2348011 L48.9303267,25.2473011 L46.2788116,26.0048769 C46.1841148,26.0330795 46.0836487,25.9837444 46.0480661,25.8915667 C46.0124835,25.799389 46.0537421,25.6953451 46.1428267,25.6526042 L46.1750237,25.640483 L48.8265388,24.8829072 L48.8265388,24.883286 Z M48.8265388,25.6408617 C48.9203217,25.6149791 49.0184607,25.6643616 49.0535622,25.7550976 C49.0886638,25.8458337 49.0493091,25.9484061 48.9625237,25.9923769 L48.9303267,26.0048769 L46.2788116,26.7624527 C46.1841148,26.7906552 46.0836487,26.7413202 46.0480661,26.6491424 C46.0124835,26.5569647 46.0537421,26.4529209 46.1428267,26.4101799 L46.1750237,26.3980587 L48.8265388,25.640483 L48.8265388,25.6408617 Z M48.8265388,26.3984375 C48.9203217,26.3725548 49.0184607,26.4219374 49.0535622,26.5126734 C49.0886638,26.6034094 49.0493091,26.7059818 48.9625237,26.7499527 L48.9303267,26.7624527 L46.2788116,27.5200284 C46.1841148,27.548231 46.0836487,27.4988959 46.0480661,27.4067182 C46.0124835,27.3145405 46.0537421,27.2104966 46.1428267,27.1677557 L46.1750237,27.1556345 L48.8265388,26.3980587 L48.8265388,26.3984375 Z M48.8265388,27.1560133 C48.9203217,27.1301306 49.0184607,27.1795131 49.0535622,27.2702491 C49.0886638,27.3609852 49.0493091,27.4635576 48.9625237,27.5075284 L48.9303267,27.5200284 L46.2788116,28.2776042 C46.1841148,28.3058067 46.0836487,28.2564717 46.0480661,28.164294 C46.0124835,28.0721162 46.0537421,27.9680724 46.1428267,27.9253314 L46.1750237,27.9132102 L48.8265388,27.1556345 L48.8265388,27.1560133 Z M48.8265388,27.913589 C48.9203217,27.8877063 49.0184607,27.9370889 49.0535622,28.0278249 C49.0886638,28.1185609 49.0493091,28.2211334 48.9625237,28.2651042 L48.9303267,28.2776042 L46.2788116,29.0351799 C46.1841148,29.0633825 46.0836487,29.0140475 46.0480661,28.9218697 C46.0124835,28.829692 46.0537421,28.7256482 46.1428267,28.6829072 L46.1750237,28.670786 L48.8265388,27.9132102 L48.8265388,27.913589 Z"
                      id="形状"
                      fill="#275C9F"
                    ></path>
                  </g>
                  <text font-family="PingFangSC-Semibold, PingFang SC" font-size="13" font-weight="500" fill="#1B2A36">
                    <tspan x="25.835" y="25">
                      {{ parseInt(item.devSn) }}
                    </tspan>
                  </text>
                </g>
              </g>
            </g>
          </svg>

          <template v-if="item.open == false">
            <el-tooltip class="item" effect="dark" content="已停止" placement="top">
              <svg
                width="6px"
                height="40px"
                viewBox="0 0 6 40"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
              >
                <title>关闭</title>
                <g id="弹窗" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <rect id="矩形备份-25" fill="#868889" x="0" y="0" width="6" height="40"></rect>
                </g>
              </svg>
            </el-tooltip>
          </template>

          <template v-if="item.open == true">
            <el-tooltip class="item" :content="textChange(item.iavg)" placement="top">
              <svg
                width="6px"
                height="40px"
                viewBox="0 0 6 40"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
              >
                <title>开启</title>
                <g id="弹窗" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <rect id="矩形备份-24" :fill="colorChange(item.iavg)" x="0" y="0" width="6" height="40"></rect>
                </g>
              </svg>
            </el-tooltip>
          </template>

          <div class="check">
            <div class="right_12">
              <span>{{ item.iavg }}A</span>
            </div>
          </div>
        </div>
        <!-- </el-tooltip> -->
      </div>
    </div>
    <div ref="echarts12" style="width: 80%; height: 100%"></div>
    <el-dialog
      custom-class="echart-dialog"
      :visible.sync="Dialog"
      :modal-append-to-body="false"
      :append-to-body="true"
      :destroy-on-close="true"
      :fullscreen="true"
    >
      <el-row type="flex" class="echart-content">
        <el-col :span="4">
          <div class="left_item" style="height: 100%; text-align: center">
            <div v-for="(item, index) in indexList" :key="index + 'o'" class="_item">
              <!-- <el-tooltip class="item" effect="dark" :content="'电耗：'+item.impEp+'kW‧h'" placement="top"> -->
              <div @click="getLineData(item.devSn, 'click')">
                <svg
                  width="50px"
                  height="40px"
                  viewBox="0 0 50 40"
                  version="1.1"
                  style="margin-right: 10px"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <g id="大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="首页" transform="translate(-1476.000000, -860.000000)">
                      <g id="1" transform="translate(1476.000000, 860.000000)">
                        <g id="编组" fill-rule="nonzero">
                          <polygon
                            id="路径"
                            fill="#5AA7F8"
                            points="0.0147964015 1.2014678 45.4693419 1.2014678 45.4693419 39.0802557 0.0147964015 39.0802557"
                          ></polygon>
                          <polygon
                            id="路径"
                            fill="#9DCDFB"
                            points="1.52994792 3.0954072 17.4390388 3.0954072 17.4390388 37.1863163 1.52994792 37.1863163"
                          ></polygon>
                          <polygon
                            id="路径"
                            fill="#5AA7F8"
                            points="4.93903883 9.53480114 14.0299479 9.53934659 14.0299479 20.1408617 4.93903883 20.1363163"
                          ></polygon>
                          <polygon
                            id="路径"
                            fill="#3579CF"
                            points="6.45419034 11.1094223 12.5674479 11.0499527 12.5674479 15.6348011 6.45419034 15.6942708"
                          ></polygon>
                          <polygon
                            id="路径"
                            fill="#A9D3FB"
                            points="7.2117661 11.8738163 11.7966146 11.8075284 11.7966146 14.8643466 7.2117661 14.9298769"
                          ></polygon>
                          <polygon
                            id="路径"
                            fill="#9DCDFB"
                            points="18.9541903 3.0954072 43.9541903 3.0954072 43.9541903 22.0954072 18.9541903 22.0954072"
                          ></polygon>
                          <polygon
                            id="路径"
                            fill="#4990D4"
                            points="41.3026752 10.6711648 42.4390388 10.6711648 42.4390388 13.6181345 41.3026752 13.6181345"
                          ></polygon>
                          <polygon
                            id="路径"
                            fill="#9DCDFB"
                            points="18.9541903 21.6560133 43.9541903 21.6560133 43.9541903 37.1863163 18.9541903 37.1863163"
                          ></polygon>
                          <path
                            d="M41.3026752,28.0954072 L42.4390388,28.0954072 L42.4390388,31.0423769 L41.3026752,31.0423769 L41.3026752,28.0954072 Z M49.6360085,0.0651041667 L45.4693419,1.21283144 L45.4693419,39.0802557 L49.6360085,37.9215436 L49.6360085,0.0651041667 Z"
                            id="形状"
                            fill="#4990D4"
                          ></path>
                          <polygon
                            id="路径"
                            fill="#70B5F9"
                            points="0.0147964015 1.2014678 6.07540246 0.0651041667 49.6360085 0.0651041667 45.4693419 1.2014678"
                          ></polygon>
                          <path
                            d="M48.8265388,10.4893466 C48.9203217,10.4634639 49.0184607,10.5128465 49.0535622,10.6035825 C49.0886638,10.6943185 49.0493091,10.7968909 48.9625237,10.8408617 L48.9303267,10.8533617 L46.2788116,11.6109375 C46.1841148,11.6391401 46.0836487,11.589805 46.0480661,11.4976273 C46.0124835,11.4054496 46.0537421,11.3014057 46.1428267,11.2586648 L46.1750237,11.2465436 L48.8265388,10.4889678 L48.8265388,10.4893466 Z M48.8265388,11.2469223 C48.9203217,11.2210397 49.0184607,11.2704222 49.0535622,11.3611582 C49.0886638,11.4518943 49.0493091,11.5544667 48.9625237,11.5984375 L48.9303267,11.6109375 L46.2788116,12.3685133 C46.1841148,12.3967158 46.0836487,12.3473808 46.0480661,12.2552031 C46.0124835,12.1630253 46.0537421,12.0589815 46.1428267,12.0162405 L46.1750237,12.0041193 L48.8265388,11.2465436 L48.8265388,11.2469223 Z M48.8265388,12.0044981 C48.9203217,11.9786154 49.0184607,12.027998 49.0535622,12.118734 C49.0886638,12.20947 49.0493091,12.3120425 48.9625237,12.3560133 L48.9303267,12.3685133 L46.2788116,13.126089 C46.1841148,13.1542916 46.0836487,13.1049565 46.0480661,13.0127788 C46.0124835,12.9206011 46.0537421,12.8165573 46.1428267,12.7738163 L46.1750237,12.7616951 L48.8265388,12.0041193 L48.8265388,12.0044981 Z M48.8265388,12.7620739 C48.9203217,12.7361912 49.0184607,12.7855737 49.0535622,12.8763098 C49.0886638,12.9670458 49.0493091,13.0696182 48.9625237,13.113589 L48.9303267,13.126089 L46.2788116,13.8836648 C46.1841148,13.9118673 46.0836487,13.8625323 46.0480661,13.7703546 C46.0124835,13.6781768 46.0537421,13.574133 46.1428267,13.531392 L46.1750237,13.5192708 L48.8265388,12.7616951 L48.8265388,12.7620739 Z M48.8265388,13.5196496 C48.9203217,13.4937669 49.0184607,13.5431495 49.0535622,13.6338855 C49.0886638,13.7246215 49.0493091,13.827194 48.9625237,13.8711648 L48.9303267,13.8836648 L46.2788116,14.6412405 C46.1841148,14.6694431 46.0836487,14.6201081 46.0480661,14.5279303 C46.0124835,14.4357526 46.0537421,14.3317088 46.1428267,14.2889678 L46.1750237,14.2768466 L48.8265388,13.5192708 L48.8265388,13.5196496 Z M48.8265388,14.2772254 C48.9203217,14.2513427 49.0184607,14.3007252 49.0535622,14.3914613 C49.0886638,14.4821973 49.0493091,14.5847697 48.9625237,14.6287405 L48.9303267,14.6412405 L46.2788116,15.3988163 C46.1841148,15.4270189 46.0836487,15.3776838 46.0480661,15.2855061 C46.0124835,15.1933284 46.0537421,15.0892845 46.1428267,15.0465436 L46.1750237,15.0344223 L48.8265388,14.2768466 L48.8265388,14.2772254 Z M48.8265388,15.0348011 C48.9203217,15.0089185 49.0184607,15.058301 49.0535622,15.149037 C49.0886638,15.239773 49.0493091,15.3423455 48.9625237,15.3863163 L48.9303267,15.3988163 L46.2788116,16.156392 C46.1841148,16.1845946 46.0836487,16.1352596 46.0480661,16.0430818 C46.0124835,15.9509041 46.0537421,15.8468603 46.1428267,15.8041193 L46.1750237,15.7919981 L48.8265388,15.0344223 L48.8265388,15.0348011 Z M48.8265388,15.7923769 C48.9203217,15.7664942 49.0184607,15.8158768 49.0535622,15.9066128 C49.0886638,15.9973488 49.0493091,16.0999212 48.9625237,16.143892 L48.9303267,16.156392 L46.2788116,16.9139678 C46.1841148,16.9421704 46.0836487,16.8928353 46.0480661,16.8006576 C46.0124835,16.7084799 46.0537421,16.604436 46.1428267,16.5616951 L46.1750237,16.5495739 L48.8265388,15.7919981 L48.8265388,15.7923769 Z M48.8265388,16.5499527 C48.9203217,16.52407 49.0184607,16.5734525 49.0535622,16.6641885 C49.0886638,16.7549246 49.0493091,16.857497 48.9625237,16.9014678 L48.9303267,16.9139678 L46.2788116,17.6715436 C46.1841148,17.6997461 46.0836487,17.6504111 46.0480661,17.5582334 C46.0124835,17.4660556 46.0537421,17.3620118 46.1428267,17.3192708 L46.1750237,17.3071496 L48.8265388,16.5495739 L48.8265388,16.5499527 Z M48.8265388,17.3075284 C48.9203217,17.2816457 49.0184607,17.3310283 49.0535622,17.4217643 C49.0886638,17.5125003 49.0493091,17.6150728 48.9625237,17.6590436 L48.9303267,17.6715436 L46.2788116,18.4291193 C46.1841148,18.4573219 46.0836487,18.4079868 46.0480661,18.3158091 C46.0124835,18.2236314 46.0537421,18.1195876 46.1428267,18.0768466 L46.1750237,18.0647254 L48.8265388,17.3071496 L48.8265388,17.3075284 Z M48.8265388,18.0651042 C48.9203217,18.0392215 49.0184607,18.088604 49.0535622,18.1793401 C49.0886638,18.2700761 49.0493091,18.3726485 48.9625237,18.4166193 L48.9303267,18.4291193 L46.2788116,19.1866951 C46.1841148,19.2148977 46.0836487,19.1655626 46.0480661,19.0733849 C46.0124835,18.9812071 46.0537421,18.8771633 46.1428267,18.8344223 L46.1750237,18.8223011 L48.8265388,18.0647254 L48.8265388,18.0651042 Z M48.8265388,18.8226799 C48.9203217,18.7967972 49.0184607,18.8461798 49.0535622,18.9369158 C49.0886638,19.0276518 49.0493091,19.1302243 48.9625237,19.1741951 L48.9303267,19.1866951 L46.2788116,19.9442708 C46.1841148,19.9724734 46.0836487,19.9231384 46.0480661,19.8309606 C46.0124835,19.7387829 46.0537421,19.6347391 46.1428267,19.5919981 L46.1750237,19.5798769 L48.8265388,18.8223011 L48.8265388,18.8226799 Z M48.8265388,19.5802557 C48.9203217,19.554373 49.0184607,19.6037556 49.0535622,19.6944916 C49.0886638,19.7852276 49.0493091,19.8878 48.9625237,19.9317708 L48.9303267,19.9442708 L46.2788116,20.7018466 C46.1841148,20.7300492 46.0836487,20.6807141 46.0480661,20.5885364 C46.0124835,20.4963587 46.0537421,20.3923148 46.1428267,20.3495739 L46.1750237,20.3374527 L48.8265388,19.5798769 L48.8265388,19.5802557 Z M48.8265388,20.3378314 C48.9203217,20.3119488 49.0184607,20.3613313 49.0535622,20.4520673 C49.0886638,20.5428033 49.0493091,20.6453758 48.9625237,20.6893466 L48.9303267,20.7018466 L46.2788116,21.4594223 C46.1841148,21.4876249 46.0836487,21.4382899 46.0480661,21.3461121 C46.0124835,21.2539344 46.0537421,21.1498906 46.1428267,21.1071496 L46.1750237,21.0950284 L48.8265388,20.3374527 L48.8265388,20.3378314 Z M48.8265388,21.0954072 C48.9203217,21.0695245 49.0184607,21.1189071 49.0535622,21.2096431 C49.0886638,21.3003791 49.0493091,21.4029515 48.9625237,21.4469223 L48.9303267,21.4594223 L46.2788116,22.2169981 C46.1841148,22.2452007 46.0836487,22.1958656 46.0480661,22.1036879 C46.0124835,22.0115102 46.0537421,21.9074663 46.1428267,21.8647254 L46.1750237,21.8526042 L48.8265388,21.0950284 L48.8265388,21.0954072 Z M48.8265388,21.852983 C48.9203217,21.8271003 49.0184607,21.8764828 49.0535622,21.9672188 C49.0886638,22.0579549 49.0493091,22.1605273 48.9625237,22.2044981 L48.9303267,22.2169981 L46.2788116,22.9745739 C46.1841148,23.0027764 46.0836487,22.9534414 46.0480661,22.8612637 C46.0124835,22.7690859 46.0537421,22.6650421 46.1428267,22.6223011 L46.1750237,22.6101799 L48.8265388,21.8526042 L48.8265388,21.852983 Z M48.8265388,22.6105587 C48.9203217,22.584676 49.0184607,22.6340586 49.0535622,22.7247946 C49.0886638,22.8155306 49.0493091,22.9181031 48.9625237,22.9620739 L48.9303267,22.9745739 L46.2788116,23.7321496 C46.1841148,23.7603522 46.0836487,23.7110171 46.0480661,23.6188394 C46.0124835,23.5266617 46.0537421,23.4226179 46.1428267,23.3798769 L46.1750237,23.3677557 L48.8265388,22.6101799 L48.8265388,22.6105587 Z M48.8265388,23.3681345 C48.9203217,23.3422518 49.0184607,23.3916343 49.0535622,23.4823704 C49.0886638,23.5731064 49.0493091,23.6756788 48.9625237,23.7196496 L48.9303267,23.7321496 L46.2788116,24.4897254 C46.1841148,24.517928 46.0836487,24.4685929 46.0480661,24.3764152 C46.0124835,24.2842374 46.0537421,24.1801936 46.1428267,24.1374527 L46.1750237,24.1253314 L48.8265388,23.3677557 L48.8265388,23.3681345 Z M48.8265388,24.1257102 C48.9203217,24.0998276 49.0184607,24.1492101 49.0535622,24.2399461 C49.0886638,24.3306821 49.0493091,24.4332546 48.9625237,24.4772254 L48.9303267,24.4897254 L46.2788116,25.2473011 C46.1841148,25.2755037 46.0836487,25.2261687 46.0480661,25.1339909 C46.0124835,25.0418132 46.0537421,24.9377694 46.1428267,24.8950284 L46.1750237,24.8829072 L48.8265388,24.1253314 L48.8265388,24.1257102 Z M48.8265388,24.883286 C48.9203217,24.8574033 49.0184607,24.9067859 49.0535622,24.9975219 C49.0886638,25.0882579 49.0493091,25.1908303 48.9625237,25.2348011 L48.9303267,25.2473011 L46.2788116,26.0048769 C46.1841148,26.0330795 46.0836487,25.9837444 46.0480661,25.8915667 C46.0124835,25.799389 46.0537421,25.6953451 46.1428267,25.6526042 L46.1750237,25.640483 L48.8265388,24.8829072 L48.8265388,24.883286 Z M48.8265388,25.6408617 C48.9203217,25.6149791 49.0184607,25.6643616 49.0535622,25.7550976 C49.0886638,25.8458337 49.0493091,25.9484061 48.9625237,25.9923769 L48.9303267,26.0048769 L46.2788116,26.7624527 C46.1841148,26.7906552 46.0836487,26.7413202 46.0480661,26.6491424 C46.0124835,26.5569647 46.0537421,26.4529209 46.1428267,26.4101799 L46.1750237,26.3980587 L48.8265388,25.640483 L48.8265388,25.6408617 Z M48.8265388,26.3984375 C48.9203217,26.3725548 49.0184607,26.4219374 49.0535622,26.5126734 C49.0886638,26.6034094 49.0493091,26.7059818 48.9625237,26.7499527 L48.9303267,26.7624527 L46.2788116,27.5200284 C46.1841148,27.548231 46.0836487,27.4988959 46.0480661,27.4067182 C46.0124835,27.3145405 46.0537421,27.2104966 46.1428267,27.1677557 L46.1750237,27.1556345 L48.8265388,26.3980587 L48.8265388,26.3984375 Z M48.8265388,27.1560133 C48.9203217,27.1301306 49.0184607,27.1795131 49.0535622,27.2702491 C49.0886638,27.3609852 49.0493091,27.4635576 48.9625237,27.5075284 L48.9303267,27.5200284 L46.2788116,28.2776042 C46.1841148,28.3058067 46.0836487,28.2564717 46.0480661,28.164294 C46.0124835,28.0721162 46.0537421,27.9680724 46.1428267,27.9253314 L46.1750237,27.9132102 L48.8265388,27.1556345 L48.8265388,27.1560133 Z M48.8265388,27.913589 C48.9203217,27.8877063 49.0184607,27.9370889 49.0535622,28.0278249 C49.0886638,28.1185609 49.0493091,28.2211334 48.9625237,28.2651042 L48.9303267,28.2776042 L46.2788116,29.0351799 C46.1841148,29.0633825 46.0836487,29.0140475 46.0480661,28.9218697 C46.0124835,28.829692 46.0537421,28.7256482 46.1428267,28.6829072 L46.1750237,28.670786 L48.8265388,27.9132102 L48.8265388,27.913589 Z"
                            id="形状"
                            fill="#275C9F"
                          ></path>
                        </g>
                        <text
                          font-family="PingFangSC-Semibold, PingFang SC"
                          font-size="13"
                          font-weight="500"
                          fill="#1B2A36"
                        >
                          <tspan x="25.835" y="25">
                            {{ parseInt(item.devSn) }}
                          </tspan>
                        </text>
                      </g>
                    </g>
                  </g>
                </svg>

                <template v-if="item.open == false">
                  <el-tooltip class="item" effect="dark" content="已停止" placement="top">
                    <svg
                      width="6px"
                      height="40px"
                      viewBox="0 0 6 40"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                    >
                      <title>关闭</title>
                      <g id="弹窗" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <rect id="矩形备份-25" fill="#868889" x="0" y="0" width="6" height="40"></rect>
                      </g>
                    </svg>
                  </el-tooltip>
                </template>

                <template v-if="item.open == true">
                  <el-tooltip class="item" :content="textChange(item.iavg)" placement="top">
                    <svg
                      width="6px"
                      height="40px"
                      viewBox="0 0 6 40"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                    >
                      <title>开启</title>
                      <g id="弹窗" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <rect id="矩形备份-24" :fill="colorChange(item.iavg)" x="0" y="0" width="6" height="40"></rect>
                      </g>
                    </svg>
                  </el-tooltip>
                </template>

                <div class="check">
                  <div class="right_12">
                    <span>{{ item.iavg }}A</span>
                  </div>
                </div>
              </div>
              <!-- </el-tooltip> -->
            </div>
          </div>
        </el-col>
        <el-col :span="20">
          <div class="echart-enlarge" ref="echarts12Large"></div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "echarts12",
  data() {
    return {
      echarts12: null,
      indexList: [],
      Dialog: false,
      echarts12Large: null,
      option: {},
      data: null
    };
  },
  created() {},
  computed: {
    echarts12State() {
      return this.$store.state.echarts12State;
    },
    echarts12LineState() {
      return this.$store.state.echarts12LineState;
    }
  },
  watch: {
    echarts12State: {
      immediate: true,
      handler(val) {
        if (val.code == 1) {
          this.indexList = val.data.sort(this.sortBy("devSn"));
        }
      }
    },
    echarts12LineState: {
      immediate: true,
      handler(val) {
        if (val.code == 1) {
          var data = val.data;
          this.data = val.data;
          this.times = data.times;
          this.yaLis = data.yaLis;
          this.$nextTick(() => {
            this.init();
            if (this.Dialog) {
              this.openDialog();
            }
          });
        }
      }
    }
  },
  mounted() {
    this.echarts12 = this.$echarts.init(this.$refs.echarts12);
    setTimeout(() => {
      this.echarts12.showLoading({
        color: "#ffffff",
        textColor: "#ffffff",
        maskColor: "rgba(255,255,255,0)"
      });
    }, 500);
    //获取空压机1的数据
    this.getLineData(1, "default");
  },
  methods: {
    sortBy(field) {
      return function(a, b) {
        return a[field] - b[field];
      };
    },
    getLineData(index, flag) {
      //获取Echarts12折线图数据
      this.$store.dispatch("actEcharts12Line", {
        beginTime: "",
        devSn: parseInt(index),
        endTime: ""
      });

      if (flag == "click") {
        this.$parent.showKongYaDialog(parseInt(index));
      }
    },
    colorChange(val) {
      if (val < 5 && val > 0) {
        return "rgb(252,66,6)";
      } else if (val >= 5 && val < 100) {
        return "#FFD700";
      } else {
        return "#3BE972";
      }
    },
    textChange(val) {
      if (val < 5 && val > 0) {
        return "停车";
      } else if (val >= 5 && val <= 100) {
        return "卸载";
      } else {
        return "加载";
      }
    },
    init() {
      var option = {
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(50,50,50,0.7)",
          borderColor: "#333",
          textStyle: {
            fontSize: 10,
            color: "#fff"
          }
        },
        xAxis: {
          type: "category",
          data: this.times,

          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 10,
              color: "#316B84"
            }
          }
        },
        grid: {
          left: "8%",
          right: "4%",
          bottom: "3%",
          top: "18%",
          containLabel: true
        },
        yAxis: {
          type: "value",
          max: 1.5,
          name: "单位：兆帕(mPa)",
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 10,
              color: "#316B84"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#316B84",
              type: "dashed",
              width: 1
            }
          }
        },
        color: ["rgb(252,66,6)"],
        series: [
          {
            data: this.yaLis,
            type: "line",
            areaStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#3DB821" // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "rgba(252,66,6,.5)" // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(252,66,6,.1)" // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                }
              }
            }
          }
        ]
      };
      this.option = option;
      this.echarts12.setOption(option);
      this.echarts12.hideLoading();
      var _this = this;
      window.addEventListener("resize", function() {
        _this.echarts12.resize();
      });
    },
    openDialog() {
      this.Dialog = true;
      setTimeout(() => {
        this.$nextTick(() => {
          this.echarts12Large = this.$echarts.init(this.$refs.echarts12Large);
          const option = {
            tooltip: {
              trigger: "item",
              backgroundColor: "rgba(50,50,50,0.7)",
              borderColor: "#333",
              textStyle: {
                fontSize: 16,
                color: "#fff"
              }
            },
            xAxis: {
              type: "category",
              data: this.times,

              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: true,
                textStyle: {
                  fontSize: 16,
                  color: "#fff"
                }
              }
            },
            grid: {
              left: "8%",
              right: "4%",
              bottom: "3%",
              top: "18%",
              containLabel: true
            },
            yAxis: {
              type: "value",
              max: 1.5,
              name: "单位：兆帕(mPa)",
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: true,
                textStyle: {
                  fontSize: 16,
                  color: "#fff"
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#316B84",
                  type: "dashed",
                  width: 1
                }
              }
            },
            color: ["rgb(252,66,6)"],
            series: [
              {
                data: this.yaLis,
                type: "line",
                areaStyle: {
                  normal: {
                    color: {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#3DB821" // 0% 处的颜色
                        },
                        {
                          offset: 0.5,
                          color: "rgba(252,66,6,.5)" // 100% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "rgba(252,66,6,.1)" // 100% 处的颜色
                        }
                      ],
                      globalCoord: false // 缺省为 false
                    }
                  }
                }
              }
            ]
          };
          this.echarts12Large.setOption(option);
          this.echarts12Large.hideLoading();
          var _this = this;
          window.addEventListener("resize", function() {
            _this.echarts12Large.resize();
          });
        });
      });
    }
  }
};
</script>

<style lang="scss">
.echart-dialog {
  .right_12 {
    color: #ffffff;
    width: 100%;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
  }
  .left_item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    ._item {
      margin: 20px 0;
    }
  }
}
</style>
